<template>
  <div class="app-container">
    <div class="flex justify-between">
      <div class="flex flex-wrap">
        <div>
          <span>用户ID：</span>
          <el-input
            v-model.number="listQuery.user_id"
            class="marginRB10"
            clearable
            placeholder="请输入用户ID"
            style="width: 200px"
          ></el-input>
        </div>
        <div>
          <span>用户昵称：</span>
          <el-input
            v-model.number="listQuery.nickname"
            class="marginRB10"
            clearable
            placeholder="请输入用户昵称"
            style="width: 200px"
          ></el-input>
        </div>
        <div>
          <span>开始时间：</span>
          <el-date-picker v-model="listQuery.start_time" class="marginRB10" placeholder="开始时间"
                          type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <div>
          <span>结束时间：</span>
          <el-date-picker v-model="listQuery.end_time" class="marginRB10" placeholder="结束时间"
                          type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </div>
        <el-button
          class="marginRB10"
          icon="el-icon-search"
          type="primary"
          @click="getList"
        >搜索
        </el-button>
        <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
      </div>
    </div>

    <el-table
      ref="dataList"
      :data="menuList"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="margin-bottom: 20px"
    >
      <el-table-column label="申请时间" prop="created_at"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="用户昵称" prop="nickname"></el-table-column>
      <el-table-column label="主播等级" prop="anchor_type_name"></el-table-column>
      <el-table-column label="欢迎语图片" prop="picture">
        <template slot-scope="scope">
          <el-image v-if="scope.row.picture" :src="scope.row.picture" fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="欢迎语文案" prop="content"></el-table-column>
      <el-table-column label="语音欢迎语" prop="audio">
        <template slot-scope="scope">
          <audio :src="scope.row.audio" controls></audio>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            style="margin-right: 10px;"
            type="text"
            @click="handlePass(row)"
          >审核通过
          </el-button>
          <el-button slot="reference" size="default" style="color: #f56c6c;" type="text" @click="handleRefuse(row)">驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :limit.sync="listQuery.page_size"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="getList"
    />

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      lock-scroll
      title="提示"
      width="30%"
      @close="onClose"
    >
      <el-form :model="form" ref="form" :rules="rules" label-width="150px" :inline="false" size="normal">
        <el-form-item label="请填写驳回理由" prop="reason">
          <el-input v-model="form.reason"></el-input>
        </el-form-item>
      </el-form>
      <section slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </section>
    </el-dialog>
  </div>
</template>

<script>
import { welcomesList, welcomesPass, welcomesRefuse } from '@/api/welcome'

export default {
  name: 'welcome',
  data() {
    return {
      dialogVisible: false,
      confirmBtn: false,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        page_size: 10
      },
      selectList: [
        { key: undefined, lab: '全部状态' },
        { key: 1, lab: '启用 ' },
        { key: 0, lab: '禁止' }
      ],
      checkedItems: [
        { key: 1, lab: '启用 ' },
        { key: 0, lab: '禁止' }
      ],
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      form: {
        reason: undefined,
        id: undefined
      },
      rules: {
        reason: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
      },
      rowId: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.page_size + index + 1
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      welcomesList(this.listQuery).then(({ data }) => {
        this.menuList = data.data
        this.total = data.total
        this.listLoading = false
        this.confirmBtn = false
      })
    },
    handlePass(row) {
      this.$confirm('是否通过该审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        welcomesPass({
          id: row.id
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.code.message
            })
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          welcomesRefuse(this.form).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: res.message
              })
              this.dialogVisible = false
              this.getList()
            }
          })
        } else {
          return false
        }
      })
    },
    onClose() {
      this.form = {
        id: undefined,
        reason: undefined
      }
    },
    handleRefuse(row) {
      this.form.id = row.id

      // this.$confirm('是否驳回该审核?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   welcomesRefuse({
      //     id: row.id
      //   }).then(res => {
      //       if (res.code === 200) {
      //         this.$message({
      //           type: 'success',
      //           message: res.message
      //         })
      //         this.dialogVisible = false
      //         this.getList()
      //       }
      //     })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消操作'
      //   })
      // })
      
      this.dialogVisible = true
    },
    resetForm() {
      this.form = {
        name: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    },
    resetSubmit() {
      this.listQuery = {
        page: 1,
        page_size: 10
      }
      this.getList()
    }
  }
}
</script>
